<template>
    <view class="page-container">
      <scroll-view class="page-wrap" :scroll-y="true" :style="'bottom:' + safeAreaHeight">
        <view class="navbar" :style="'height:' + navBarHeight + '; padding-top: ' + statusBarHeight"></view>
        <view class="main">
			<view style="color: #fff;"> LOGO</view>
			<view style="color: #fff;"> 请输入您的问题</view>
          <view class="list" >
            <view class="title">AI剪辑</view>
            <view class="func-list">
              <view class="item">
                	<image src="/static/index/sucai.png"></image>
                	<view class="title2">素材库</view>
              </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">一件剪辑</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/Password@2x.png"></image>
			    	<view class="title2">账号权限</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/Send@2x.png"></image>
			    	<view class="title2">多镜头混剪</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">视频库</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">模板云剪</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">视频库</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">高级混剪</view>
			  </view>

            </view>
			<view class="title">AI素材</view>
			<view class="func-list">
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">AI文案</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">AI图片</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/Password@2x.png"></image>
			    	<view class="title2">AI美图</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/Send@2x.png"></image>
			    	<view class="title2">AI视频</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">AI音乐</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2">爆店码</view>
			  </view>
			  <view class="item">
			    	<image  src="/static/index/sucai.png"></image>
			    	<view class="title2"></view>
			  </view>
			</view>
          </view>
        </view>
      </scroll-view>

      <customTabbar selected="index" theme="black" color="#fefbf7" background-color="#201d2b" border-color="#111"></customTabbar>
    </view>
</template>

<script>
import customTabbar from '@/components/customTabbar'
export default {
	components: { customTabbar },
	data() {
		return {
			isEmpty: false,
			swiperList: [],
			notice: null,
			qrcode: '',
			navBarShow: false,
			title: '首页',
			helpList: [],
      user_id: '',
      share_title: '',
      share_image: '',
      navBarHeight: 0,
      statusBarHeight: 0,
      safeAreaHeight: 0
		};
	},
	onLoad(options) {
    // #ifndef WEB
    const app = getApp();
    this.statusBarHeight = app.globalData.statusBarHeight + 'px'
    this.navBarHeight = app.globalData.navBarHeight + 'px'
    this.safeAreaHeight = app.globalData.safeAreaHeight + 'rpx'
    // #endif
    // #ifdef WEB
    this.navBarHeight = '15px'
    this.getH5Setting()
    // #endif
		this.getHelpList();
		this.getSwiperList();
    if (options.tuid) {
      uni.setStorageSync('tuid', options.tuid)
    } else if (options.scene) {
      let params = this.$util.queryToArr(decodeURIComponent(options.scene))
      if (params.tuid) {
        uni.setStorageSync('tuid', params.tuid)
      }
    }
	},
	onPullDownRefresh() {
		this.getSwiperList();
		this.getHelpList();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 500);
	},
	onShow() {
    // #ifdef MP-WEIXIN
    this.getShareSetting();
    // #endif
  },
  onShareAppMessage() {
    return {
      title: this.share_title,
      imageUrl: this.share_image,
      path: '/pages/index/index?tuid=' + this.user_id
    }
  },
  onShareTimeline() {
    return {
      title: this.share_title,
      imageUrl: this.share_image
    }
  },
  onAddToFavorites() {
    return {
      title: this.share_title,
      imageUrl: this.share_image
    }
  },
	methods: {
    getShareSetting() {
      this.$util.request({
        url: '/wxapp/getShareSetting',
        loading: false
      }).then(res => {
        this.user_id = res.data.user_id;
        this.share_title = res.data.share_title;
        this.share_image = res.data.share_image;
      })
    },
		noticeClick() {
			if (this.notice) {
				uni.navigateTo({
					url: '/pages/article/detail?type=notice'
				});
			}
		},
		getHelpList() {
			this.$util.request({
			  url: '/article/getList',
			  data: {
				  type: 'help',
          is_hot: 1
			  }
			}).then(res => {
			  this.helpList = res.data.list
			})
		},
		getSwiperList() {
			this.$util.request({
			  url: '/article/getSwiperList'
			}).then(res => {
        if (res.data && res.data.length > 0) {
          this.swiperList = res.data;
        } else {
          this.swiperList = [{
            image: 'https://clone.ttk.ink/upload/image/671e2bb156d1b.png',
            link_url: "/pages/zuopin/create"
          }]
        }
			})
		},
		getH5Setting() {
			this.$util.request({
			  url: '/h5/getSetting'
			}).then(res => {
        if (res.data.page_title) {
          uni.setNavigationBarTitle({
            title: res.data.page_title
          });
        }
			})
		},
		goPage(page) {
		  uni.navigateTo({
			  url: page
		  })
		},
    onArticleClick(article) {
		  if (article.content_type === 'link') {
        this.$util.openUrl(article.link_url)
		  } else {
        uni.navigateTo({
          url: '/pages/article/detail?type=' + article.type + '&id=' + article.id
        });
		  }
		},
    onSwiperClick(index) {
      var url = this.swiperList[index].link_url
      this.$util.openUrl(url)
    },
	}
}
</script>
<style scoped>
@import './index.css';
</style>
